import React from 'react';
import PropTypes from 'prop-types'
// 代码高亮
import { withRouter } from 'react-router-dom';

import { observer, inject } from 'mobx-react';
import Helmet from 'react-helmet'
import RD from '../../stores/article_detail';
import './index.scss';
// 代码高亮
import hljs from '../../../external_module/highlight.js/lib/index';
import '../../../external_module/highlight.js/styles/idea.css';
import Breadcrumbs from '../../components/breadcrumbs/index';
import Conmments from '../../containers/comments/index';

@inject((stores) => {
  const store = {
    rd: stores.rd,
  }
  return store
})
@observer
class ArticleDetailContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      detailContent: '',
    }
    this.addFavorite = this.addFavorite.bind(this)
  }
  componentDidMount() {
    this.getDetailContent();
  }
  componentWillUnmount() {
    this.props.rd.cancel()
    hljs.initHighlighting.called = false
  }
  // 获取文章详情
  getDetailContent() {
    // 文章id
    const { arcId } = this.props
    this.props.rd.getRd(arcId)
      .then((res) => {
        if (res) {
          hljs.initHighlighting();
        } else {
          this.props.history.push('/404');
        }
      })
  }
  // 处理返回的数据
  filter(data) {
    return {
      title: data.title.rendered,
      date: data.date.substr(0, 10),
      author: data.author,
      content: data.content.rendered,
    }
  }
  // 添加收藏
  addFavorite() {
    let url
    const title = this.state.detailContent.title.rendered;
    try {
      url = window.location;
      window.external.addFavorite(url, title);
    } catch (e) {
      try {
        url = window.location;
        window.sidebar.addPanel(title, url, '');
      } catch (error) {
        alert('抱歉，您所使用的浏览器无法完成此操作。\n\n请使用快捷键Ctrl+D进行添加！');
      }
    }
  }
  asyncBootstrap() {
    return new Promise((resolve, reject) => {
      const { arcId } = this.props
      this.props.rd.getRd(arcId)
        .then(() => {
          resolve(true)
        }).catch(reject)
    })
  }
  render() {
    const article = this.props.rd.article.get(`article${this.props.arcId}`)
    const data = article && article.content ? this.filter(article) : {}
    const cateId = article ? article.categories[0] : ''
    const currentTitle = cateId === 7 ? '学习笔记' : (cateId === 4 ? '微信精选' : '技术文章') //eslint-disable-line
    return (
      <div id="article-detail-container">
        <div className="w">
          <div className="container">
            <Breadcrumbs
              currentTitle={currentTitle}
            />
            {data && data.content ?
              <div className="detai-content">
                <Helmet>
                  <title>
                    {data.title}
                  </title>
                </Helmet>
                <h1 className="detail-title">
                  {data.title}
                </h1>
                <div className="control">
                  <span className="time">
                    {data.date}
                  </span>
                  <span className="go-comment">
                    去评论
                  </span>
                  <span className="go-collect" onClick={this.addFavorite}>
                    +添加到收藏夹
                  </span>
                </div>
                <div className="detail" dangerouslySetInnerHTML={{ __html: data.content }} />
                <Conmments arcId={this.props.arcId} />
              </div>
              :
              <div className="loading">
                加载中...
              </div>
            }
          </div>
        </div>
      </div>
    )
  }
}
export default withRouter(ArticleDetailContainer);
ArticleDetailContainer.propTypes = {
  arcId: PropTypes.number,
  history: PropTypes.objectOf(Object),
  rd: PropTypes.instanceOf(RD),
}
